﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<%@ Import Namespace="MyExtensions" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Index.aspx
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
	<script src="../../Scripts/MicrosoftAjax/Start.debug.js" type="text/javascript"></script>
	<script src="../../Scripts/demo.js" type="text/javascript"></script>
	<style type="text/css">
		.sys-template
		{
			display: none;
		}
		.tableHeader
		{
			background-color: Teal;
			color: White;
			font-weight: 700;
		}
		.caption
		{
			background-color: LightBlue;
			color: White;
			font-weight: 700;
		}
		.buttonBar
		{
			horizontal-align: right;
		}
	</style>
	<h2>
		Demo in action</h2>
	<hr />
	<div id="Demo1">
		<table>
			<tr class="tableHeader">
				<td>
					ID
				</td>
				<td>
					Name
				</td>
				<td>
					Contact
				</td>
				<td>
					# Orders
				</td>
			</tr>
			<tbody sys:attach="dataview" class="sys-template" dataview:dataprovider="{{ dataContext }}"
				dataview:fetchoperation="{{ queryObject.toString() }}" dataview:autofetch="true">
				<tr>
					<td>
						{{ CustomerID }}
					</td>
					<td>
						{{ CompanyName }}
					</td>
					<td>
						{{ ContactName }}
					</td>
					<td>
						{{ Orders.length }}
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<hr />
	<input type="button" value="Commit all changes" onclick="doCommit()" />
	<hr />
	<div id="Demo2">
		<table>
			<tr class="tableHeader">
				<td>
					Customer ID
				</td>
			</tr>
			<tr>
				<td>
					<%= Html.TextBox("CustomerID", "ALFKI") %>
					<input type="button" value="查询" onclick="doLoad()" />
				</td>
			</tr>
		</table>
		<br />
		<br />
		<table sys:attach="dataview" id="Editor" class="sys-template" dataview:dataprovider="{{ dataContext }}"
			dataview:autofetch="false">
			<tr>
				<td class="caption">
					ID
				</td>
				<td>
					{{ CustomerID }}
				</td>
			</tr>
			<tr>
				<td class="caption">
					Company
				</td>
				<td>
					{{ CompanyName }}
				</td>
			</tr>
			<tr>
				<td class="caption">
					Address
				</td>
				<td>
					<%= Html.SysTextBox("Address", "{binding Address}")%>
				</td>
			</tr>
			<tr>
				<td class="caption">
					City
				</td>
				<td>
					{{ City }}
				</td>
			</tr>
			<tr>
				<td align="right" colspan="2">
					Changes stored automatically. Click to commit at any time.
				</td>
			</tr>
		</table>
	</div>
	<hr />
	<div id="Demo3">
		<ul id="masterView" sys:attach="dataview" class="sys-template" dataview:dataprovider="{{ dataContext }}"
			dataview:fetchoperation="{{ queryObject1.toString() }}" dataview:autofetch="true">
			<li><span sys:command="select">{ binding CompanyName }</span></li>
		</ul>
		<div id="detailsView">
			<table sys:attach="dataview" class="sys-template" dataview:data="{binding selectedData, source=$masterView}">
				<tr>
					<td class="caption">
						ID
					</td>
					<td>
						{{ CustomerID }}
					</td>
				</tr>
				<tr>
					<td class="caption">
						Company
					</td>
					<td>
						{{ CompanyName }}
					</td>
				</tr>
				<tr>
					<td class="caption">
						Address
					</td>
					<td>
						<%= Html.SysTextBox("Address", "{binding Address}")%>
					</td>
				</tr>
				<tr>
					<td class="caption">
						City
					</td>
					<td>
						{{ City }}
					</td>
				</tr>
				<tr>
					<td align="right" colspan="2">
						Changes stored automatically. Click to commit at any time.
					</td>
				</tr>
			</table>
		</div>
	</div>
</asp:Content>
